<template>
  <div>
    <v-toolbar type="alert">
      <div slot="tip" class="panel panel-default panel-search">
        <el-form :inline="true">
          <el-form-item label="编码" prop="code">
            <el-input v-model="page.query.param.code" clearable></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="page.query.param.name" clearable></el-input>
          </el-form-item>
        <el-form-item label="类型">
                    <el-select :clearable="true" v-model="page.query.param.classType" style="width:100px">
                        <el-option v-for="item in $dongxwDict.store.CLASS_TYPES" :key="item[0]" :value="item[0]"
                                   :label="item[1]"></el-option>
                    </el-select>
                </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" v-keycode="'ENTER'"
              >查询</el-button
            >
            <el-button @click="cancel">取消</el-button>
            <!--<el-button plain @click="exportRecords">导出XLS</el-button>-->
            <el-button type="primary" plain @click="create">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--<el-button plain @click="exportRecords">导出 XLS</el-button>-->
      <!--<el-button type="primary" plain @click="create">新增</el-button>-->
    </v-toolbar>

    <div width="50%">
      <!--:click="clickRow"-->
      <v-table
        ref="table"
        :dblclick="edit"
        :click="clickRow"
        :page="page"
        :pageSize="12"
        :table-minheight="122"
        @dataloaded="onDataloaded"
      >
        <!--<el-table-column prop='departmentId' :sortable='true' label='部门标识' width='120'>-->
        <!--<template slot-scope='{row}'><span style='color:black'>-->
        <!--{{row.departmentId}}</span>-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
          prop="classType"
          :sortable="true"
          label="班次类型"
          width="111"
        >
          <template slot-scope="{ row }">
            {{ DICT.CLASSTYPE[row.classType] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          :sortable="true"
          label="班次编码"
          width="120"
        >
          <template slot-scope="{ row }"
            ><span style="color: black"> {{ row.code }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          :sortable="true"
          label="班次名称"
          width="160"
        >
          <template slot-scope="{ row }">
            <span style="color: black"> {{ row.name }}</span>
            <!--<el-button type="text" @click="edit(row)"  plain>{{  row.name }}</el-button>-->
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :sortable="true"
          label="启用状态"
          width="100"
        >
          <template slot-scope="{ row }">
            {{ DICT.STATUS[row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updatedAt"
          :sortable="true"
          label="修改时间"
          width="120"
        >
          <template slot-scope="{ row }"
            ><span style="color: black"> {{  $dongxwDict.viewDate(row.updatedAt) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="最后修改人" width="100">
          <template slot-scope="{ row }"
            ><span style="color: black"> {{ row.userName }}</span>
          </template>
        </el-table-column>

        <el-table-column width="80" label="操作">
          <template slot-scope="scope">
            <el-button type="text" title="编辑" @click="edit(scope.row)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button
              type="text"
              @click="del(scope.row, scope.$index)"
              title="删除"
            >
              <span style="color: red">
                <i class="el-icon-delete red"></i
              ></span>
            </el-button>
          </template>
        </el-table-column>
      </v-table>
    </div>
    <v-dialog ref="formDiag" :width="'30%'" title="信息编辑">
      <form-panel @saved="onFormSaved"></form-panel>
      <div slot="footer">
        <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
          >保存</el-button
        >
        <el-button
          type="default"
          @click="
            () => {
              $refs.formDiag.hide();
            }
          "
          >取消</el-button
        >
      </div>
    </v-dialog>
  </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
  color: green;
}
</style>

<script>
import FormPanel from "./Form";

export default {
  components: { FormPanel },
  props: {
    fatherMethodShowSub: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      DICT: {
        CLASSTYPE: {
          10: "正常班",
          20: "加班",
          30: "休班",
        },
        STATUS: {
          10: "草稿",
          20: "启用",
          30: "禁用",
        },
      },
      metafields: [],

      formStatus: 1,
      orderDateRange: [],
      summaryMap: {},
      page: {
        query: {
          orderBys: "code|asc",
          param: {
            parentId: 0,
            prdFlag: 0,
            isDeleted: false,
          },
        },
        getData: this.$api.attend.attend.ClassMasterService.query,
      },
      tableActions: [
        {
          name: "编辑",
          handle: this.edit,
        },
        {
          name: "删除",
          handle: this.del,
          style: "color:red",
        },
      ],
    };
  },
  computed: {},

  methods: {
    onDataloaded(rsp) {},
    /*
            导出
             */
    exportRecords() {
      let params = _.cloneDeep(this.getSearchParams());
      params.param.parentId = null;
      this.$api.attend.attend.ClassMasterService.export(params);
    },
    getSearchParams() {
      this.page.query.dateRanges = {};
      if (
        this.dateRangeType != null &&
        this.dateRange &&
        this.dateRange.length > 0
      ) {
        this.page.query.dateRanges[this.dateRangeType] = {
          startDate: this.dateRange[0],
          endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
        };
      }
      return this.page.query;
    },
    create() {
      this.$refs.formDiag.show();
    },
    edit(row) {
      this.$refs.formDiag.show({ classMasterId: row.classMasterId });
    },

    del(row) {
      this.$confirm("确定删除此记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.attend.attend.ClassMasterService.deleteById(row.classMasterId).then(
          (rsp) => {
            this.search();
            this.$msgJsonResult(rsp);
          }
        );
      });
    },
    onFormSaved() {
      this.$refs.formDiag.hide();
      this.$nextTick(this.search);
    },
    init(options = {}) {
      if (options.parentId) {
        this.parentId = options.classMasterId;
      }
      this.search();
    },
    search() {
      this.$refs.table.load();
      //this.$refs.tablesub.load();
    },
    cancel() {
      this.dateRange = [];
      this.page.query.param = {
        isDeleted: false,
      };
      this.search();
    },

    clickRow(row) {
      this.row = row;
      // console.log(JSON.stringify(row));
      if (this.fatherMethodShowSub) {
        this.fatherMethodShowSub(row);
      }
    },
  },

  created() {},
  mounted() {
    this.$on("init", this.init);
  },
};
</script>
